<template>
    <div class="container">
        <div class="about">
            <el-upload
                ref="upload"
                class="avatar-uploader"
                list-type="picture-card"
                action="#"
                :auto-upload="false"
                :http-request="uploadHttpRequest"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
            >
                <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        </div>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    name: 'changeinformation',
    data() {
        return {
            imageUrl: '',
            uploadData: {
                userName: '2904933393',
                realName: '白郑鑫',
                nickName: '2904933393',
                email: '2904933393@qq.com',
                sex: '男',
                userNation: '汉族',
                userNumber: '610423200106141319',
                userStatus: '共青团员',
                userSchool: '西安理工大学',
                userSchoolId: '3190932002',
                qqNumber: '2904933393',
                userOccupation: '学生',
                userEduBackground: '本科',
                userIntro: '我是一名十四运篮球场馆志愿者'
            }
        };
    },
    methods: {
        // 上传文件及其附带参数
        uploadHttpRequest(param) {
            const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
            formData.append('avatar', param.file); //添加文件对象
            formData.append('data', JSON.stringify(this.uploadData)); //将data转换为json格式
            // let uploadUrl = 'https://paas-edu.bktencent.com/o/bai-volunteer/v1/users/modifyinfo'; //上传地址
            let uploadUrl = 'http://localhost:8000/v1/users/modifyinfo';
            axios.post(uploadUrl, formData).then(res => {
                console.log(res);
            });
        },
        // 触发上传文件函数
        submitUpload() {
            this.$refs.upload.submit();
        },
        // 上传成功的回调
        handleAvatarSuccess(res, file) {
            console.log(file);
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        // 上传之前的判断
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    }
};
</script>

<style scoped>
.avatar-uploader .el-upload {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 28px;
    height: 28px;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
